import React, { Component } from "react";
import { RecomStyle } from "../style";

class Recommend extends Component {
  state = {
    data: [
      {
        id: 1,
        title: "今日推荐",
      },
      {
        id: 2,
        title: "篮球",
      },
      {
        id: 3,
        title: "视屛",
      },
      {
        id: 4,
        title: "最新资讯",
      },
      {
        id: 5,
        title: "潮流风向",
      },
      {
        id: 6,
        title: "3C新奇特",
      },
    ],
    currentIndex: 0,
  };
  changNav(index) {
    this.setState((state) => ({
      currentIndex: index,
    }));
  }
  render() {
    return (
      <RecomStyle>
        <ul>
          {this.state.data.map((item, index) =>
            this.state.currentIndex === index ? (
              <li
                key={item.id}
                className="active"
                onClick={() => this.changNav(index)}
              >
                {item.title}
              </li>
            ) : (
              <li key={item.id} onClick={() => this.changNav(index)}>
                {item.title}
              </li>
            )
          )}
        </ul>
      </RecomStyle>
    );
  }
}

export default Recommend;
